{% extends 'base.html' %}
{% block content %}
<h2 class="text-center mb-3">⭐ My Favourite Movies</h2>
<div class="row" id="favRow">
    {% if movies %}
        {% for movie in movies %}
        <div class="col-md-3 mb-4 fav-card" data-id="{{ movie.imdb_id }}">
            <div class="card bg-secondary text-light h-100">
                <img src="{{ movie.poster|default:'https://via.placeholder.com/300x450' }}" class="card-img-top" alt="{{ movie.title }}">
                <div class="card-body">
                    <h5 class="card-title">{{ movie.title }}</h5>
                    <p>{{ movie.year }}</p>
                    <button class="btn btn-danger w-100 remove-fav" data-id="{{ movie.imdb_id }}">🗑 Remove</button>
                </div>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <h4 class="text-warning text-center">No favourites yet!</h4>
    {% endif %}
</div>

<script>
$('.remove-fav').click(function(){
    const imdb_id = $(this).data('id');
    $.post("{% url 'remove_favourite' %}", { imdb_id: imdb_id })
        .done(function(res){
            // remove card
            $(`.fav-card[data-id="${imdb_id}"]`).remove();
            alert(res.message);
        }).fail(function(){ alert('Failed to remove'); });
});
</script>
{% endblock %}